var device=request("from")
var phone=request("phone")

var pic_b64=""
var pic_url=""


$(function(){
	//获取练车地址及图片
	get_pic()
	//跳转地图选择地址页面
	$("#area").click(function(){
		location.href="select_map.html?phone="+phone+"&from="+device
	})
	
	//用于压缩图片的canvas
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext('2d');
	//瓦片canvas
	var tCanvas = document.createElement("canvas");
	var tctx = tCanvas.getContext("2d");
	var maxsize = 100 * 1024;
	var base64_arr=[];
	var url_arr=[];
	var filechooser = document.getElementById("choose");
    $("#upload").on("click", function() {
  		if (base64_arr.length == 6) {
		    $("#prompt").text("最多上传6张图片");
            $(".prompt").fadeIn(300,function(){
                setTimeout(function(){$(".prompt").fadeOut(300)},3000)
            })
            return false;
	    }
        filechooser.click();
    })
    .on("touchstart", function() {
        $(this).addClass("touch")
    })
    .on("touchend", function() {
        $(this).removeClass("touch")
    });
  filechooser.onchange = function() {
  	if (!this.files.length) return;
    var files = Array.prototype.slice.call(this.files);
    if(($("#server .pic").size()+$("#local .pic").size())==6){
    	$("#prompt").text("最多上传6张图片");
        $(".prompt").fadeIn(300,function(){
            setTimeout(function(){$(".prompt").fadeOut(300)},3000)
        })
        return false;
	}
    if (files.length > (6-$("#server .pic").size()-$("#local .pic").size())) {
	    $("#prompt").text("最多同时选择"+(6-$("#server .pic").size()-$("#local .pic").size())+"张图片");
        $(".prompt").fadeIn(300,function(){
            setTimeout(function(){$(".prompt").fadeOut(300)},3000)
        })
        return false;
	}
    files.forEach(function(file, i) {
      if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
      var reader = new FileReader();
//          获取图片大小
      var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
       var pic_div = '<div class="pic" style="background-image: url();"><span class="del">X</span></div>';
       $("#local").append(pic_div);
      reader.onload = function() {
        var result = this.result;
        var img = new Image();
        img.src = result;
        //如果图片大小小于100kb，则直接上传
        if (result.length <= maxsize) {
         img = null;
         $("#local .pic:last-child").css("background-image", "url(" + result + ")");
         base64_arr.push(result)
         return;
        }
//      图片加载完毕之后进行压缩，然后上传
        if (img.complete) {
          callback();
        } else {
          img.onload = callback;
        }
        function callback() {
          var data = compress(img);
           $("#local .pic:last-child").css("background-image", "url(" + data + ")");
          base64_arr.push(data)
          img = null;
        }
      };
      reader.readAsDataURL(file);
    })
  };
  //    使用canvas对大图片进行压缩
  function compress(img) {
    var initSize = img.src.length;
    var width = img.width;
    var height = img.height;
    //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
    var ratio;
    if ((ratio = width * height / 4000000) > 1) {
      ratio = Math.sqrt(ratio);
      width /= ratio;
      height /= ratio;
    } else {
      ratio = 1;
    }
    canvas.width = width;
    canvas.height = height;
//        铺底色
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    //如果图片像素大于100万则使用瓦片绘制
    var count;
    if ((count = width * height / 1000000) > 1) {
      count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
//            计算每块瓦片的宽和高
      var nw = ~~(width / count);
      var nh = ~~(height / count);
      tCanvas.width = nw;
      tCanvas.height = nh;
      for (var i = 0; i < count; i++) {
        for (var j = 0; j < count; j++) {
          tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
          ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
        }
      }
    } else {
      ctx.drawImage(img, 0, 0, width, height);
    }
    //进行最小压缩
    var ndata = canvas.toDataURL('image/jpeg', 0.1);
    console.log('压缩前：' + initSize);
    console.log('压缩后：' + ndata.length);
    console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    return ndata;
  }
  
  //删除选择的图片
  $("#local").on("click",".del",function(){
  	$(this).parents(".pic").remove();
  	base64_arr.splice($(this).parents(".pic").index(),1);
  })
  //删除服务器图片
   $("#server").on("click",".del",function(){
  	$(this).parents(".pic").remove();
  	url_arr.splice($(this).parents(".pic").index(),1);
  })
	
	//上传图片
	$(".submit").click(function(){
		if($("#server .pic").size()>6||$("#server .pic").size()==6){
            return false;
		}
		
		//base64数组转成键值格式字符串
		$.each(base64_arr, function(index,val) {
			pic_b64+="&pic_b64="+encodeURIComponent(val)
		});
		//服务器图片地址数组转成键值格式字符串
		$.each(url_arr, function(index,val) {
			pic_url+="&pic_url="+encodeURIComponent(val)
		});
		upload()
	})
	
	//上传图片接口
	function upload(){
		$.ajax({
		    url: DATA_URL+"setaddrpics",
		    data: "phone="+phone+pic_url+pic_b64,
		    type: "post",
		    dataType: 'json',
		    timeout: 5000,
		    success:function (data) {
		    	if(data.code=="0"){
		    		console.log(data.info)
		            if(device=="app"){
		            	$("#prompt").text("图片上传成功");
			            $(".prompt").fadeIn(300,function(){
			                setTimeout(function(){$(".prompt").fadeOut(300)},3000)
			            })
		            }
		            else{
		            	$("#prompt").text("图片上传成功");
			            $(".prompt").fadeIn(300,function(){
			                setTimeout(function(){$(".prompt").fadeOut(300,function(){
			                	location.href="card.html"
			                })},3000)
			            })
		            }
		    	}
				else{
					$("#prompt").text(data.msg);
		            $(".prompt").fadeIn(300,function(){
		                setTimeout(function(){$(".prompt").fadeOut(300)},3000)
		            })
				}
		    },
		    error:function () {
		    	$("#prompt").text("您的网络不给力哦~");
		        $(".prompt").fadeIn(300,function(){
		            setTimeout(function(){$(".prompt").fadeOut(300)},3000)
		        })
		    }
		});
	}
	//获取练车地址及图片
	function get_pic(){
		$.ajax({
		    url: DATA_URL+"getdirveraddr",
		    data: "phone="+phone,
		    type: "post",
		    dataType: 'json',
		    timeout: 5000,
		    success:function (data) {
		    	if(data.code=="0"){
		    		if(data.info.area_str!=""&&data.info.area_str!=null){
		    			$("#area").text(data.info.area_str)
		    		}
		    		var pic_list=""
		    		$.each(data.info.pics,function(index,val){
		    			pic_list+='<div class="pic" style="background-image: url('+val+');"><span class="del">X</span></div>';
		    			url_arr.push(val)
		    		})
		    		$("#server").html(pic_list)
		    		
		    	}
				else{
					$("#prompt").text(data.msg);
		            $(".prompt").fadeIn(300,function(){
		                setTimeout(function(){$(".prompt").fadeOut(300)},3000)
		            })
				}
		    },
		    error:function () {
		    	$("#prompt").text("您的网络不给力哦~");
		        $(".prompt").fadeIn(300,function(){
		            setTimeout(function(){$(".prompt").fadeOut(300)},3000)
		        })
		    }
		});
	}
})
